<template>
	<view>
		<view class="topBorder">
			<image src="../../static/fanhui.png" class="iconBack" @click="pageToBack"></image>
			<image class="headImg" :src="src"></image>
			<image class="mainImg" src="https://img01-xusong.91q.com/6E77EB11-B2F1-40C2-A900-DEE9B3C4A977.png"></image>
			<view class="title">{{associationdata.name}}</view>
			<view class="classification">分类：{{associationdata.type}}</view>
			<view @click="goAlbum()">
				<image class="albumIcon" src="https://img01-xusong.91q.com/16268208-F483-4B26-9B8A-48232F78A3CD.png">
				</image>
				<text class="albumTitle">相册</text>
			</view>
			<image class="albumRight" src="https://img01-xusong.91q.com/11372E64-6C70-4B59-B412-7C84546B198C.png">
			</image>
		</view>
		<view>
			<uni-notice-bar show-icon scrollable :text="rollText" />
		</view>
		<view class="introduceBorder">
			<image class="introduceIcon" src="https://img01-xusong.91q.com/0EA9109D-3283-4ABA-B9CB-58277BCFEA96.png">
			</image>
			<view class="introduceTitle">简介</view>
			<text class="introduce_no" v-if="associationdata.introduce==''">暂时没有简介哦</text>
			<text class="introduce_yes">{{associationdata.introduce}}</text>

			<!-- 这里也加个判断，没有简介的时候这俩都不显示 -->
			<view @click="goIntroduceMore()">
				<view class="introduceMore">更多</view>
				<image class="introduceMore_Icon" src="../../static/arrow-right.png"></image>
			</view>
		</view>
		<view class="memberBorder">
			<image class="memberIcon" src="https://img01-xusong.91q.com/E0FA1591-8078-4E93-936A-1D1614A1BEC6.png">
			</image>
			<view class="memberTitle">成员</view>
			<view class="memberImgBorder">
				<view v-for="(item,index) in userInfor">
					<image class="member" :src="item.avatarUrl" @click="goMember(item)"></image>
				</view>
			</view>
			<image class="memberMore" src="https://img01-xusong.91q.com/0EB3C753-4ED0-44C1-AB86-32F7CE360AB3.png"
				@click="goMemberMore()"></image>
		</view>
		<!-- <view>
			<video src="https://uniapp-icons-1310815387.cos.ap-nanjing.myqcloud.com/video_20210131_173403_edit.mp4" class="associationVideo"></video>
		</view> -->
		<view class="actBorder">
			<view class="actBorder_title">活动</view>

			<view class="actLine"></view>
			<view @click="goActivityMore()">
				<view class="actMore">更多</view>
				<image class="actMoreIcon" src="../../static/arrow-right.png"></image>
			</view>
			<view v-for="(item,index) in moreActData.slice(0,1)" @click="gotoDeatil(item)">
				<image class="actImg" :src="imgUrl+item.imgId"></image>
				<view class="actTitle">{{item.eventName}}</view>
				<view class="actPosition">地点：{{item.address}}</view>
				<view class="actStartTime">开始时间：{{item.startTime}}</view>
				<image class="actRight" src="../../static/arrow-right.png"></image>
			</view>

		</view>
		<view class="bottomBorder">
			<view v-if="hasLogin">
				<view @click="like()">
					<image src="https://img01-xusong.91q.com/704D8B80-5566-4A73-BDFE-5AB95274EB5A.png"
						class="shoucangIcon_no" v-if="isFavoite<1"></image>
					<view class="shoucangText_no" v-if="isFavoite<1">收藏</view>
				</view>
				<view @click="warn()" v-if="hasLogin">
					<image src="https://img01-xusong.91q.com/EF5C044D-B4DB-4B34-8E10-13C1D99B9FAA.png"
						class="shoucangIcon_yes" v-if="isFavoite>=1"></image>
					<view class="shoucangText_yes" v-if="isFavoite>=1">已收藏</view>
				</view>
			</view>
			<view v-if="hasLogin">
				<view class="enter" v-if="role=='president'" @click="gotoManage()">管理社团</view>
				<view class="enter" v-else-if="role=='members'" @click="isIn()">已加入社团</view>
				<view class="enter" v-else-if="role=='pending'" @click="pleaseWait()">正在审核请稍等</view>
				<view class="enter" @click="sign()" v-else>加入社团</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				imgUrl: 'https://www.codingyt.com/getImage/',
				associationdata: {},
				id: '', //社团的id
				userInfor: [],
				shetuan: {},
				userid: this.$store.state.userInfo.id,
				moreActData: [],
				isFavoite: '',
				src: '',
				role: '',
				rollText: '暂无数据',
				isInfo: this.$store.state.inforOver,
				hasLogin:this.$store.state.hasLogin,
			}
		},
		methods: {
			gotoDeatil(item){
				
				uni.navigateTo({
					url:'./act?content='+JSON.stringify(item)
				})
			},
			loading() {
				uni.showToast({
					title: '加载中',
					icon: 'loading',
					duration: 1500,
				})
			},
			isIn() {
				let that=this
				uni.showModal({
					content: '你已加入该社团，确定要退出社团吗？',
					
					success(res) {
						if(res.confirm){
							uni.request({
								url:'https://www.codingyt.com/club/userOrganization/delete',
								data:{
									"userId": that.userid, 
									"organizationId": that.id, 
								},
								method:'POST',
								success() {
									uni.showModal({
										content:'退出成功'
									})
									that.role=''
								},
							})
						}
					},
					
				})
			},
			pleaseWait() {
				uni.showModal({
					content: '正在审核请耐心等待',
				})
			},
			goAlbum() {
				//去到我们的相册页面里面去
				var data=this.associationdata
				//console.log(this.associationdata);
				uni.navigateTo({
					url: './associationImgs?content='+JSON.stringify(data),
				})
			},
			goIntroduceMore() {
				
				var data=this.associationdata.introduce
				uni.navigateTo({
					url: './asoIntroduceMore?content='+JSON.stringify(data),
				})
			},
			goMemberMore() {
				//传递这我们
				var data = this.userInfor
				uni.navigateTo({
					url: './asoMemberMore?content=' + JSON.stringify(data),
				})
			},
			goActivityMore() {
				var data = this.moreActData
				uni.navigateTo({
					url: './asoActivityMore?content=' + JSON.stringify(data),
				})
			},
			goMember(data) {

				uni.navigateTo({
					url: './member?content=' + JSON.stringify(data),
				})
			},
			gotoManage() {
				//取到我们的管理页面 这个社团的管理页面
				uni.navigateTo({
					url: './managePeople2?content=' + JSON.stringify(this.associationdata),
				})
			},
			warn() {
				uni.showModal({
					content: '你已签到,请勿重复签到!',
					success() {

					},
					fail() {

					}
				})
			},
			//这个函数是进行绑定我们的回退接口的地方
			pageToBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getUser() {
				let that = this;
				uni.request({
					url: 'https://www.codingyt.com/club/userOrganization/select',
					data: {
						organizationId: that.id,
					},
					success(res) {
						console.log('data1');
						console.log(res.data.data);
						let data=[]
						for (var i = 0; i < res.data.data.length; i++) {
							if(res.data.data[i].role!=='pending'){
								data.push(res.data.data[i])
							}
						}
						that.userInfor = data
					}
				})
			},
			sign() {
				if (this.isInfo) {
					let that = this
					uni.showModal({
						content: '你确定要报名吗?',
						success(res) {
							if (res.confirm) {
								uni.request({
									url: 'https://www.codingyt.com/club/userOrganization/insert',
									data: {
										"userId": that.userid,
										"organizationId": that.id,
										"role": "pending"
									},
									method:'POST',
									success(res) {
										console.log(res.data);
										that.role='pending'
									}
								})
							} else if (res.cancel) {
								
							}

						},
						fail() {

						}
					})
				} else {
					uni.showModal({
						content: '你未完善个人信息，请完善信息之后进行报名'
					})
				}
			},
			like() {
				let that = this
				uni.showModal({
					content: '你确定要进行收藏吗？',
					success() {
						uni.request({
							url: 'https://www.codingyt.com/club/favorite/add',
							data: {
								"userId": that.userid,
								"collect": that.id,
								"type": "organization",
							},
							method: 'POST',
							success(res) {
								
							}
						})
					},
					fail() {

					}
				})
			},

			//获取这个在这个社团下面的角色信息(有哪些)
			getRole() {
				let that = this;
				uni.request({
					url: 'https://www.codingyt.com/club/userOrganization/select',
					data: {
						userId: that.userid,
						organizationId: that.id,
					},
					success(res) {
						that.role = res.data.data[0].role
						
					}
				})
			},
			getIsFavorite() {
				let that = this
				uni.request({
					url: 'https://www.codingyt.com/club/favorite/have',
					data: {
						userId: that.userid,
						collect: that.id,
						type: 'organization',
					},
					success(res) {
						that.isFavoite = res.data.data
						
					}

				})
			},
			getMoreData() {
				let that = this
				uni.request({
					url: 'https://www.codingyt.com/club/event/select',
					data: {
						organization_id: this.id
					},
					success(res) {
						that.moreActData = res.data.data
						
					}
				})
			}

		},
		created() {

		},
		//接收用户从其他页面的传递值()
		onLoad(val) {
			this.loading()
			let that = this
			let mgs = JSON.parse(val.msg)
			this.associationdata = mgs
			this.rollText = this.associationdata.announcement
			// console.log(mgs);
			this.id = mgs.id
			this.getUser();
			//忘记筛选id的条件了(全部都查出来了)
			this.getIsFavorite()
			this.getMoreData()
			this.getRole()
			
			try{
				if((this.associationdata.imgId.search("https://www.codingyt.com")!=-1)){
				
					this.src=this.associationdata.imgId
					
					
					return;
				}
			}catch(err){
				
			}
			
			 if (this.associationdata.imgId != undefined) {
				this.src = this.imgUrl + this.associationdata.imgId;
				
				
			} else {
				this.src = this.imgUrl + this.associationdata.img_id;
			
			}
			
		},
		mounted() {}
	}
</script>

<style>
	.iconBack {
		left: 36rpx;
		top: 98rpx;
		width: 48rpx;
		height: 48rpx;
		z-index: 50;
		position: absolute;
	}

	.topBorder {
		height: 416rpx;
	}

	.headImg {
		left: 34rpx;
		top: 140rpx;
		width: 180rpx;
		height: 180rpx;
		border-radius: 112rpx;
		position: absolute;
		z-index: 2;
	}

	.mainImg {
		left: 0rpx;
		top: 0rpx;
		width: 750rpx;
		height: 416rpx;
		opacity: 0.5;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		background-color: rgba(0, 0, 0, 1);
		position: absolute;
	}

	.title {
		left: 230rpx;
		top: 140rpx;
		width: 144rpx;
		height: 68rpx;
		color: rgba(255, 255, 255, 100);
		font-size: 48rpx;
		text-align: left;
		position: absolute;
	}

	.classification {
		left: 234rpx;
		top: 240rpx;
		width: 400rpx;
		height: 40rpx;
		color: rgba(250, 250, 248, 100);
		font-size: 28rpx;
		text-align: left;
		position: absolute;
	}

	.albumIcon {
		left: 46rpx;
		top: 348rpx;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
	}

	.albumTitle {
		left: 110rpx;
		top: 352rpx;
		width: 128rpx;
		height: 40rpx;
		color: rgba(255, 255, 255, 100);
		font-size: 28rpx;
		text-align: left;
		position: absolute;
	}

	.albumRight {
		left: 180rpx;
		top: 356rpx;
		width: 34rpx;
		height: 34rpx;
		position: absolute;
	}

	.introduceBorder {
		left: 24rpx;
		top: 554rpx;
		width: 704rpx;
		height: 168rpx;
		line-height: 40rpx;
		border-radius: 22rpx;
		background-color: rgba(255, 255, 255, 100);
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		position: absolute;
	}

	.introduceIcon {
		left: 24rpx;
		top: 12rpx;
		width: 44rpx;
		height: 44rpx;
		position: absolute;
	}

	.introduceTitle {
		left: 74rpx;
		top: 16rpx;
		width: 52rpx;
		height: 38rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 26rpx;
		text-align: left;
		position: absolute;
	}

	.introduce_no {
		left: 240rpx;
		top: 82rpx;
		width: 224rpx;
		height: 40rpx;
		color: rgba(155, 155, 155, 100);
		font-size: 28rpx;
		text-align: left;
		position: absolute;
	}

	.introduce_yes {
		left: 60rpx;
		top: 66rpx;
		width: 572rpx;
		height: 80rpx;
		color: rgba(155, 155, 155, 100);
		font-size: 26rpx;
		text-align: left;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.introduceMore {
		left: 598rpx;
		top: 20rpx;
		width: 52rpx;
		height: 38rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 26rpx;
		text-align: left;
		position: absolute;
	}

	.introduceMore_Icon {
		left: 650rpx;
		top: 24rpx;
		width: 30rpx;
		height: 30rpx;
		position: absolute;
	}

	.memberBorder {
		left: 24rpx;
		top: 788rpx;
		width: 704rpx;
		height: 198rpx;
		line-height: 40rpx;
		border-radius: 22rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.4);
		position: absolute;
	}

	.memberIcon {
		left: 18rpx;
		top: 24rpx;
		width: 40rpx;
		height: 40rpx;
		position: absolute;
	}

	.memberTitle {
		left: 74rpx;
		top: 20rpx;
		width: 52rpx;
		height: 44rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 26rpx;
		text-align: left;
		position: absolute;
	}

	.memberImgBorder {
		left: 58rpx;
		top: 74rpx;
		width: 500rpx;
		height: 80rpx;
		position: absolute;
	}

	.member {
		width: 80rpx;
		height: 80rpx;
		border-radius: 66rpx;
		margin-right: 46rpx;
		float: left;
	}

	.memberMore {
		left: 562rpx;
		top: 74rpx;
		width: 82rpx;
		height: 82rpx;
		position: absolute;
	}

/* 	.associationVideo {
		left: 24rpx;
		top: 1052rpx;
		width: 704rpx;
		height: 314rpx;
		border-radius: 22rpx;
		position: absolute;
	}
 */
	.actBorder {
		left: 0rpx;
		top: 1100rpx;
		width: 750rpx;
		height: 500rpx;
		line-height: 40rpx;
		border-radius: 60rpx 60rpx 0rpx 0rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 0rpx -2rpx 46rpx -20rpx rgba(0, 0, 0, 0.4);
		border: 2rpx solid rgba(187, 187, 187, 100);
		position: absolute;
	}

	.actBorder_title {
		left: 334rpx;
		top: 32rpx;
		width: 80rpx;
		height: 58rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 40rpx;
		text-align: left;
		position: absolute;
	}

	.actLine {
		left: 34rpx;
		top: 108rpx;
		width: 686rpx;
		height: NaNpx;
		border: 2rpx solid rgba(187, 187, 187, 100);
		position: absolute;
	}

	.actMore {
		left: 590rpx;
		top: 36rpx;
		width: 56rpx;
		height: 40rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		position: absolute;
	}

	.actMoreIcon {
		left: 656rpx;
		top: 40rpx;
		width: 30rpx;
		height: 30rpx;
		position: absolute;
	}

	.actImg {
		left: 84rpx;
		top: 148rpx;
		width: 162rpx;
		height: 162rpx;
		border-radius: 22rpx;
		position: absolute;
	}

	.actTitle {
		left: 278rpx;
		top: 150rpx;
		width: 336rpx;
		height: 80rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.actPosition {
		left: 278rpx;
		top: 234rpx;
		width: 220rpx;
		height: 38rpx;
		color: rgba(155, 155, 155, 100);
		font-size: 26rpx;
		text-align: left;
		position: absolute;
		overflow: hidden;
		text-overflow: ellipsis;
		/*溢出显示省略号*/
		white-space: nowarp;
		/*强制在一行显示*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.actStartTime {
		left: 278rpx;
		top: 272rpx;
		width: 348rpx;
		height: 38rpx;
		color: rgba(155, 155, 155, 100);
		font-size: 26rpx;
		text-align: left;
		position: absolute;
	}

	.actRight {
		left: 646rpx;
		top: 204rpx;
		width: 48rpx;
		height: 48rpx;
		position: absolute;
	}

	.bottomBorder {
		left: 0rpx;
		top: 1485rpx;
		width: 750rpx;
		height: 140rpx;
		line-height: 40rpx;
		background-color: rgba(255, 255, 255, 100);
		position: fixed;
		z-index: 5;
	}

	.shoucangIcon_no {
		left: 56rpx;
		top: 12rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.shoucangText_no {
		left: 64rpx;
		top: 66rpx;
		width: 78rpx;
		height: 38rpx;
		color: rgba(16, 16, 16, 70);
		font-size: 26rpx;
		text-align: left;
		position: absolute;
	}

	.shoucangIcon_yes {
		left: 56rpx;
		top: 12rpx;
		width: 68rpx;
		height: 68rpx;
		position: absolute;
	}

	.shoucangText_yes {
		left: 50rpx;
		top: 66rpx;
		width: 78rpx;
		height: 38rpx;
		color: rgba(16, 16, 16, 70);
		font-size: 26rpx;
		text-align: left;
		position: absolute;
	}

	.enter {
		left: 210rpx;
		top: 20rpx;
		width: 476rpx;
		height: 80rpx;
		border-radius: 14rpx;
		background-color: rgba(249, 193, 110, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 40rpx;
		line-height: 80rpx;
		text-align: center;
		font-family: Microsoft Yahei;
		border: 2rpx solid rgba(187, 187, 187, 100);
		position: absolute;
	}
</style>
